<script setup lang="ts">
import { ref, defineEmits } from "vue";
import { getList as getBranchList } from "@/api/idp/branch";
import { getList as getClientList } from "@/api/idp/client";
import { addTask } from "@/api/idp/task";

const emit = defineEmits(["onSearchEnv"]);
const onSearchTable = () => {
  emit("onSearchEnv");
};

const formArgus = ref({
  name: "",
  taskTime: {},
  taskType: "1",
  path1: "",
  path2: "",
  check: false,
  taskRank: "1",
  mapIds: []
});
const dialogVisible = ref(false);
const dialogCisibleForBindBranch = ref(false);
const dialogCisibleForBindClient = ref(false);
const branchList = ref([]);
const clientList = ref([]);
const checkedBranch = ref([]);
const checkedClient = ref([]);
const showLabelList = ref([]); // label 列表

const taskTypeIsFile = ref(true);

const taskTypeChange = (val: any) => {
  console.log(val);
  taskTypeIsFile.value = val == 1;
};

const taskRankChange = (val: any) => {
  switch (val) {
    case "1":
      dialogCisibleForBindBranch.value = false;
      dialogCisibleForBindClient.value = false;
      showLabelList.value = [];
      showLabelList.value.push({
        label: "全部设备",
        key: "0"
      });
      break;
    case "2":
      dialogCisibleForBindBranch.value = true;
      dialogCisibleForBindClient.value = false;
      branchList.value = [];
      getBranchList().then(res => {
        res.forEach(item => {
          branchList.value.push({
            label: item.name,
            key: item.id
          });
        });
      });
      break;
    case "3":
      dialogCisibleForBindBranch.value = false;
      dialogCisibleForBindClient.value = true;
      clientList.value = [];
      getClientList().then(res => {
        res.forEach(item => {
          clientList.value.push({
            label: item.hostname,
            key: item.id
          });
        });
      });
      break;
  }
};
const filterMethod = (query, item) => {
  return item.label.indexOf(query) > -1;
};
const submitBranchBut = () => {
  console.log(checkedBranch);
  dialogCisibleForBindBranch.value = false;
  const mapKey = new Map();
  branchList.value.forEach(item => {
    mapKey.set(item.key, item.label);
  });
  showLabelList.value = [];
  checkedBranch.value.forEach(id => {
    showLabelList.value.push({
      label: mapKey.get(id),
      key: id
    });
  });
};
const submitClientBut = () => {
  dialogCisibleForBindClient.value = false;
  const mapKey = new Map();
  clientList.value.forEach(item => {
    mapKey.set(item.key, item.label);
  });
  showLabelList.value = [];
  checkedClient.value.forEach(id => {
    showLabelList.value.push({
      label: mapKey.get(id),
      key: id
    });
  });
  console.log(showLabelList.value, clientList.value, checkedClient.value);
};
const showdialogForAdd = () => {
  formArgus.value = {
    name: "",
    taskTime: {},
    taskType: "1",
    path1: "",
    path2: "",
    check: false,
    taskRank: "1",
    mapIds: []
  };
  showLabelList.value = [];
  showLabelList.value.push({
    label: "全部设备",
    key: "0"
  });
  dialogVisible.value = true;
};

const onSubmit = () => {
  const data = {
    name: formArgus.value.name,
    taskType: Number(formArgus.value.taskType),
    startTime: String(formArgus.value.taskTime[0].getTime() / 1000),
    endTime: String(formArgus.value.taskTime[1].getTime() / 1000),
    taskRank: Number(formArgus.value.taskRank),
    mapIds: [],
    details: ""
  };
  if (formArgus.value.taskRank != "1") {
    showLabelList.value.forEach(item => {
      data.mapIds.push(item.key);
    });
  }
  if (formArgus.value.taskType == "1") {
    const detailContent = {
      filePath: formArgus.value.path1,
      md5: formArgus.value.path2,
      checkMd5: formArgus.value.check
    };
    data.details = JSON.stringify(detailContent);
  }
  if (formArgus.value.taskType == "2") {
    const detailContent = {
      processName: formArgus.value.path1,
      exePath: formArgus.value.path2,
      checkExePath: formArgus.value.check
    };
    data.details = JSON.stringify(detailContent);
  }
  addTask(data).then(() => {
    dialogVisible.value = false;
    onSearchTable();
  });
};

defineExpose({
  showdialogForAdd
});
</script>

<template>
  <el-dialog v-model="dialogVisible" title="添加文件/进程检查任务">
    <el-form ref="elForm" :model="formArgus" label-width="100px">
      <el-form-item label="任务名称">
        <el-input
          v-model="formArgus.name"
          placeholder="请输入任务名称"
          :maxlength="50"
          show-word-limit
          clearable
        />
      </el-form-item>
      <el-form-item label="任务时间">
        <el-date-picker
          v-model="formArgus.taskTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="任务类型">
        <el-radio-group v-model="formArgus.taskType" @change="taskTypeChange">
          <el-radio label="1">文件检查</el-radio>
          <el-radio label="2">进程检查</el-radio>
        </el-radio-group>
      </el-form-item>
      <div v-show="taskTypeIsFile">
        <el-form-item label="文件路径">
          <el-input v-model="formArgus.path1" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="参考MD5">
          <el-input v-model="formArgus.path2" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="检查MD5">
          <el-radio-group v-model="formArgus.check">
            <el-radio :label="true" :value="true">检查</el-radio>
            <el-radio :label="false" :value="false">忽略</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <div v-show="!taskTypeIsFile">
        <el-form-item label="进程路径">
          <el-input v-model="formArgus.path1" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="执行文件">
          <el-input v-model="formArgus.path2" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="检查执行路径">
          <el-radio-group v-model="formArgus.check">
            <el-radio :label="true" :value="true">检查</el-radio>
            <el-radio :label="false" :value="false">忽略</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <el-form-item label="发布范围">
        <el-radio-group v-model="formArgus.taskRank" @change="taskRankChange">
          <el-radio label="1">全局</el-radio>
          <el-radio label="2">按部门</el-radio>
          <el-radio label="3">按设备</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <div v-for="item in showLabelList" :key="item.key">
          <el-tag type="success" style="padding-right: 5px">{{
            item.label
          }}</el-tag>
        </div>
      </el-form-item>
    </el-form>
    <el-dialog
      v-model="dialogCisibleForBindBranch"
      width="500"
      title="按分支机构发布任务范围"
      append-to-body
    >
      <el-transfer
        v-model="checkedBranch"
        filterable
        :filter-method="filterMethod"
        filter-placeholder="按名称过滤"
        :data="branchList"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="checkedBranch = []">重置</el-button>
          <el-button type="primary" @click="submitBranchBut">确认</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      v-model="dialogCisibleForBindClient"
      width="500"
      title="按设备发布任务范围"
      append-to-body
    >
      <el-transfer
        v-model="checkedClient"
        filterable
        :filter-method="filterMethod"
        filter-placeholder="按名称过滤"
        :data="clientList"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="checkedClient = []">重置</el-button>
          <el-button type="primary" @click="submitClientBut">确认</el-button>
        </span>
      </template>
    </el-dialog>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped></style>
